<script setup lang="ts">
import { Cell } from '@antv/x6'

const props = defineProps<{
  cell: Cell | any
}>()

let _cell = toRaw(props.cell)

watch(() => props.cell, () => {
  _cell = toRaw(props.cell)
  init()
})

onMounted(() => {
  init()
})

function init () {
  switchState.value = _cell.data.dataConfig.isShowUnit
}

const switchState = shallowRef(false)

function switchChangeHandle () {
  _cell.data.dataConfig.isShowUnit = switchState.value
}

function test () {
  _cell.data.dataConfig.updateData(_cell, { value: 12.23, unit: 'V' })
}
</script>

<template>
  <el-collapse-item title="更多" name="More">
    <el-form-item label="显示单位">
      <el-switch v-model="switchState" @change="switchChangeHandle" />
    </el-form-item>
    <el-form-item label="测试">
      <el-button @click="test">模拟数据</el-button>
    </el-form-item>
  </el-collapse-item>
</template>

<style scoped lang="scss">

</style>
